<template>
<div>
  <el-card>
    <el-button style="color: white;background-color: #e15536">新增車輛</el-button>
    <el-table :data="listdata">
      <el-table-column label="序号" type="index"/>
      <el-table-column label="车牌号码" prop="licensePlate"/>
      <el-table-column label="车辆类型" prop="truckTypeName"/>
      <el-table-column label="司机数量" prop="driverNum"/>
      <el-table-column label="车辆状态" prop="workStatus">
        <template #default="{row}">
          <!--          正常-->
          <el-row type="flex" style="width: 70px" align="middle"  v-if="row.workStatus===1">
            <el-col> <div style="width: 10px;height: 10px;border-radius: 50%;background-color: aquamarine "/></el-col>
            <el-col>正常</el-col>
          </el-row>
          <!--          不正常-->
          <el-row type="flex" align="middle"  v-if="row.workStatus===0">
            <el-col> <div style="width: 10px;height: 10px;border-radius: 50%;background-color: orangered "/></el-col>
            <el-col>停用</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="GPS设备ID" prop="deviceGpsId"/>
      <el-table-column label="实载重量(T)" prop="allowableVolume"/>
      <el-table-column label="实载体积(方)" prop="allowableLoad"/>
      <el-table-column label="操作" width="200px">
        <template #default="{row}">
<!--          <el-row>{{row}}}</el-row>-->
          <el-button type="text" @click="route(row.id)">查看详情</el-button>
          <el-button type="text" @click="showdialog=true">启用</el-button>
          <el-button type="text" @click="change(row.licensePlate,row.truckTypeName,row.workStatus,row.allowableLoad,row.allowableVolume)">配置司机</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--        页码-->
    <el-pagination
      class="tabletop"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="form.pagesize"
      layout=" sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
<!--                                                         一号dialog-->
  <el-dialog :visible="showdialog" title="车辆启用" @close="close">
    <el-row>确定要启用吗？车辆启用需满足以下条件</el-row>
    <el-row type="flex">
      <el-col>1.车辆信息已完善</el-col>
      <el-col>2.绑定信息>=2，且有排版</el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-button @click="close">取消</el-button>
      <el-button type="danger" @click="close">确定</el-button>
    </el-row>
  </el-dialog>
<!--                                                         二号dialog-->
  <el-dialog :visible="showdialogt" title="车辆配置" @close="close1">
    <el-row>确配置司机需满足以下条件</el-row>
    <el-row type="flex">
      <el-col>1.车辆信息已完善</el-col>
      <el-col>2.车俩无未完成运输任务</el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-button @click="close1">取消</el-button>
      <el-button type="danger" @click="submit">确定</el-button>
    </el-row>
  </el-dialog>
<!--                                                        配置弹层二层弹窗-->
<el-dialog :visible="showdialogtTwo" title="配置司机" @close="shows">
<div style="background-color:#fbfafa; ">
  <el-row type="flex">
  <el-col>车牌号：{{ this.a }}</el-col>
  <el-col>车型:{{this.b}}</el-col>
</el-row>
  <el-row type="flex">
    <el-col style="display: flex;justify-content: start">
      <span>车辆状态：</span>
      <div  style="width: 50px;height: 20px;background-color:#37c608;color: white;border-radius: 35%;text-align: center ">
        可用
      </div>
    </el-col>
    <el-col>实际载重:{{this.d}}</el-col>
  </el-row>
  <el-row>实载体积：{{this.e}}</el-row>
</div>
  <el-row type="flex" justify="start">
    <el-col>配置司机:</el-col>
    <el-col>
      <el-select></el-select>
    </el-col>
  </el-row>
<!--空状态-->
  <el-row>
<div style="background-color:#f8faff;font-size: 20px;height: 50px;line-height: 50px ">
  <span style="margin-right: 130px">序号</span>
  <span style="margin-right: 130px">司机名称</span>
  <span>操作</span>
</div>
  </el-row>
  <el-row>
    <el-empty image="https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png"></el-empty>
  </el-row>

<el-row type="flex" justify="center">
  <el-button type="danger">确认</el-button>
  <el-button @click="shows">取消</el-button>
</el-row>

</el-dialog>
</div>
</template>
<script>
import { getTruckApi } from '@/api/vehicle'

export default {
  name: 'tab-table',
  props: {
    listdata: {
      type: Array
    },
    total: {
      type: Number
    }
  },
  data () {
    return {
      // listdata: [{}],
      showdialogtTwo: false,
      showdialogt: false,
      showdialog: false,
      form: {
        type: 3,
        page: 1,
        pagesize: 5
      },
      a: '',
      b: '',
      c: '',
      d: '',
      e: ''
    }
  },
  created () {
    // this.total=this.listdata
  },
  methods: {
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.form.pagesize = newSize
      console.log(this.form.pagesize)
    },
    // 监听pagename改变
    handleCurrentChange (newNum) {
      this.form.page = newNum
      console.log(this.form.page)
    },
    // 获取车辆详情
    async getlists () {
      const res = await getTruckApi()
      console.log(res)
    },
    // 关闭弹出
    close () {
      this.showdialog = false
    },
    close1 () {
      this.showdialogt = false
    },
    // 配置司机点击确认
    submit () {
      this.showdialogt = false
      this.showdialogtTwo = true
    },
    // 配置司机
    change (licensePlate, truckTypeName, workStatus, allowableLoad, allowableVolume) {
      this.showdialogt = true
      this.a = licensePlate
      this.b = truckTypeName
      this.c = workStatus
      this.d = allowableLoad
      this.e = allowableVolume
    },
    // 关闭配置司机弹出
    shows () {
      this.showdialogtTwo = false
    },
    // 查看详情按钮，跳转路由
    route (id) {
      this.$router.push({
        path: '/transit/vehicle-detail',
        query: { id, formUrlName: '车辆管理' }
      })
    }
  }
}
</script>
